@charset 'utf-8';

.head{
  font-size: 12px;
  color: #999;
  width: 100%;
  position: relative;
  background-color: #F2F2F2;
  .cen{
    width: 990px;
    height: 26px;
    margin: 0 auto;
    p{
      float: left;
      height: 26px;
      line-height: 26px;
      a{
        &:hover{
          color: red;
          text-decoration: underline;
        }
      }
      i{
        color: red
      }
    }
    .p_one{
      height: 26px;
      line-height: 26px;
      margin-right: 20px;
    }
    .p_two{
      a{
        padding: 0 20px 0 10px;
      }
    }

    ul{
      float: right;
      >.li_one{
        padding-right: 10px;
      }
      li{
        float: left;
        height: 26px;
        line-height: 26px;
        position: relative;
        // padding: 0 5px;
        a{
          &:hover{
            color: red;
            text-decoration: underline;
          }
        }
        i{
          color: red;
        }
        div{
        padding:0  10px 0 10px;

          &:hover b{
            transform: rotate(180deg)
          }
          b{
             display: block;
             float: right;
             width: 0;
             height: 0;
             border: 5px solid;
             border-color: #999 transparent transparent transparent;
             border-width: 5px 5px 0;
             margin-top: 11px;
          }
          &:hover{
            background-color: white;
          }
          &:hover div{
                display: block;
          }
          .hide_one{
            width: 72px;
            display: none;
            position: absolute;
            top: 26px;
            left: -1px;
            background-color: white;
            padding-bottom: 10px;
            a{
              width: 100%;
              display: block;
              height: 16px;
              z-index: -20px;
            //  text-align: center;
            
            }
          }
          .hide_two{
            width: 72px;
            display: none;
            position: absolute;
            top: 26px;
            left: -1px;
            background-color: white;
            padding-bottom: 10px;
            a{
              display: block;
              height: 16px;
             text-align: center;
            
            }
          }
          .hide_three{
            width: 175px;
            display: none;
            position: absolute;
            top: 26px;
            left: -50px;
          }
          .hide_four{
            width: 120px;
            display: none;
            position: absolute;
            top: 26px;
            right: 0;
            background-color: white;
            padding-bottom: 10px;
            div{
              a{
                float: right;
              }
              p{
                width: 100%;
                display: block;
              }
            }
            a{
              display: block;
              height: 16px;
             text-align: center;
            
            }
            
          }
        }
      }
      .li_one{
        height: 22px;
      }
    }
  }
}

//  ~~~~~~~~~~~~~~~~~~~~~~~~~~~
.img{
  width: 100%;
  background-color: #F83C3D;
  height: 129px;
  >.center{
    >div{
      border-radius: 10px;
      float: left;
      width: 236px;
      height: 88px;
      overflow: hidden;
      margin: 30px 2px 11px 0 ;
      a{
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
}

.lbt{
  width: 100%;
  position: relative;
  overflow: hidden;
  // border-radius: 40px;
  >.left_one{
    position: absolute;
    width: 360;
    height: 3000px;
    left: -195px;
    top: 0;
    background-image:url(../images/back01.png) ;
    background-position: 0 700px;    
   }
   >.right_one{
    position: absolute;
    width: 180px;
    height: 3800px;
    right: -15px;
    top: 0;
    background-color: #F6EFEF;
    background-image:url(../images/back01.png) ;    
    background-position: 0 700px;    
   }
  .center{
    // height: 1000px;
    border-radius: 0 0 40px 40px;
    overflow: hidden;
    margin-bottom: 60px;
  background-color: white;
  

     .input{
       img{
         width: 87px;
         height: 53px;
         display: block;
         float: left;
         margin: 28px 0 0 73px;
       }
       >div{
         width: 630px;
         height: 42px;
         float: left;
         margin:36px 0 0 86px ;
         border: 1px solid red;
         border-radius: 20px;
         position: relative;
         input{
           outline: none;
           position: absolute;
           top: 0;
           left: 20px;
           width: 540px;
           height: 42px;
           border: none;
         }
       
         b{
           display: block;
           position: absolute;
           top: 0;
           left: 541px;
           width: 90px;
           height: 42px;
           line-height: 42px;
           font-size: 18;
           background-color: #F83C3D;
           color: white;
           border-radius: 20px;
           text-align: center;
         }

       }
     }
     .nav_top{
       position: relative;
       margin-top: 40px;

      >h2{
        float:left;
        margin: 15px 0 0 18px;
        color: red;
      }
      >div{
        float:left;
        margin: 8px 0 0 167px;
        a{
          display: block;
          float:left;
          margin-right: 16px;
          font-size: 14px;
          height: 35px;
          line-height: 35px;
          &:hover{
            color: red;
            text-decoration: underline blue;
          }
          img{
            width: 100px;
            height: 30px;
          }

        }
      }
     }
     .nav{
       width: 100%;
       >.left{
         width: 212px;
         float: left;
         >ul{

           i{
             padding-right: 10px;
           }
           margin: 12px 0 0 18px;
           li{
             font-size: 14px;
             line-height: 32px;
             height: 32px;
              span{
                padding: 0 10px;
                color: #666666;
              }
              a{
                color: #666666;
                &:hover{
                  color: #F83C3D;
                  text-decoration: none;
                }
              }
           }
         }
       }
       >.middle{
        float: left;
         width: 520px;
         height: 519px;
         margin: 14px 0 0 38px;
         .m_one{
          border-radius: 10px;
          overflow: hidden;
          #carousel {
            margin: 0px;
            padding: 0px;
            width: 520px;
            height: 280px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
          }
          #carousel_image_container {
            margin: 0px;
            padding: 0px;
            list-style: none;
            width: 2600px;
            height: 280px;
            position: absolute;
            top: 0px;
            left: 0px;
          }
          #carousel_image_container>li {
            width: 520px;
            height: 280px;
            float: left;
          }
          #carousel_image_container>li>a {
            width: 100%;
            height: 100%;
            display: block;
          }
          #carousel_image_container>li>a>img {
            outline: none;
            border: none;
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            display: block;
          }
          #carousel_li_container {
            margin: 0px;
            padding: 0px 10px;
            list-style: none;
            height: 25px;
            border-radius: 20px;
            position: absolute;
            bottom: 15px;
            left: 50%;
            margin-left: -88.625px;
            z-index: 2000;
            opacity: .8;
          }
          #carousel_li_container>li {
            margin: 3.75px 7px;
            padding: 0px;
            width: 8px;
            height: 8px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border-radius: 50%;
            border: 1px solid #FFF;
            float: left;
            cursor: pointer;
            transition: all .5s;
          }
          #carousel_li_container>li.active {
            border: 1px solid orangered;
            background: orangered;
          }
          #carousel_controller span {
            width: 30px;
            height: 30px;
            display: block;
            background: rgba(0, 0, 0, 0.3);
            text-align: center;
            line-height: 30px;
            color: #fff;
            font-size: 14px;
            position: absolute;
            top: 50%;
            margin-top: -20px;
            cursor: pointer;
          }
          
          
          /*当鼠标放到span上的效果*/
          
          #carousel_controller span:hover {
            background: rgba(0, 0, 0, 0.5);
          }
          
          
          /*右边按钮位置*/
          
          #carousel_controller_left {
            left: -10px;
            border-radius: 0 20px 20px 0;

          }
          #carousel_controller_right {
            right: -10px;
            border-radius: 20px 0 0 20px;
          }
         }
         .m_two{
           margin-top: 33px;
           width: 520px;
           height: 206px;
           border-radius: 10px;
           overflow: hidden;
           #car {
            margin: 0px;
            padding: 0px;
            width: 520px;
            height: 206px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
          }
          #car_image_container {
            margin: 0px;
            padding: 0px;
            list-style: none;
            width: 520px;
            height: 206px;
            position: absolute;
            top: 0px;
            left: 0px;
          >li {
            width: 520px;
            height: 200px;
            position: absolute;
            top: 0px;
            left: 0px;
            >a:nth-child(1){
              margin-right: 3px; 
            }
            >a {
              width:256px;
              height: 200px;
              display: inline-block;
              >img {
                width:256px;
                height: 200px;
              }
            }
          }
        }
          #car_li_container {
            margin: 0px;
            padding: 0px 10px;
            list-style: none;
            height: 25px;
            border-radius: 20px;
            position: absolute;
            bottom: 15px;
            left: 50%;
            margin-left: -88.625px;
            z-index: 2000;
            opacity: .8;
            display: none;
          }
          #car_li_container>li {
            margin: 3.75px 7px;
            padding: 0px;
            width: 8px;
            height: 8px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border-radius: 50%;
            border: 1px solid #FFF;
            float: left;
            cursor: pointer;
            transition: all .5s;
          }
          #car_li_container>li.active {
            border: 1px solid orangered;
            background: orangered;
          }
          #car_controller span {
            width: 30px;
            height: 30px;
            display: block;
            background: rgba(0, 0, 0, 0.3);
            text-align: center;
            line-height: 30px;
            color: #fff;
            font-size: 26px;
            position: absolute;
            top: 50%;
            margin-top: -20px;
            cursor: pointer;
          }
          #car_controller_left {
            left: -10px;
            border-radius: 0 20px 20px 0;
          }
          #car_controller_right {
            right: -10px;
            border-radius:  20px 0 0  20px;
          }
         }
       }
       >.right{
        float: left;
        background-color: #F83C3D;
        width: 384px;
        height: 508px;
        margin: 14px 0 0 15px;
        border-radius: 12px;
        background-color: #f3f3f3;
        overflow: hidden;
        .r_top{
        width: 384px;
          >div{
            width: 80px;
            height: 106px;
            margin: 20px auto 0;
            >a{
              display: block;
              width: 100%;
              height: 100%;
              &:hover{
                color: #F83C3D;
                text-decoration: underline blue;
              }
              >img{
                display: block;
                width: 100%;
                border-radius: 50%;
              }
              >span{
                display: block;
                width: 100%;
                height: 16px;
                font-size: 12px;
                text-align: center;
                line-height: 16px;
                margin-top: 10px;
              }
            }
          }
        }
        .r_cen{
          width: 356px;
          height: 141px;
          margin: 17px 0 0 14px ;
          border-radius: 10px;
          overflow: hidden;

        }
        .r_bot{
          width: 370px;
          height: 106px;
          margin:27px 0 0 14px;
          >p{
            color: #666;
            font-size: 14px;
            line-height: 14px;
            margin-bottom: 12px;
            span{
              color: #000;
              font-size: 14px;
              font-weight: 700;
              margin-right: 6px;
              line-height: 16px;
            }
          }
          >ul{
            >li{
              margin-bottom: 8px;
              width: 295px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              a{
                cursor: pointer;
                font-size: 12px;
                color: #666;
                line-height: 12px;
                span{
                  background-color: rgba(255,174,174,.2);
                  color: #fe0137;
                  font-size: 12px;
                  padding: 3px 4px;
                  border-radius: 2px;
                  margin-right: 4px;
                }
              }
            }
          }
          
        }
        .r_foo{
          width: 384px;
          height: 51px;
          margin: 20px 0 0 32px;
          >div:nth-child(4){
            margin: 0;
          }
          >div{
            float: left;
            margin-right: 34px;
            a{
              color: #333;
              >i{
                font-size: 22px;
                margin-left: 19px;
                font-weight: 700;
              }
              >div{
                font-size: 12px
              }
            }
          }
        }
       }

     }
     .opctiy{
width: 100%;
margin: 18px 4px 0 10px;
     }
     .shop{
       width: 100%;
       margin: 18px 0 0 18px;
       >.shop_top{
       width: 100%;
       height: 0;
       margin: 18px 4px 0 0px;
       }
       >.shop_m{
       width: 100%;
       margin-top: 60px;
       >div{
         width: 18%;
         float: left;
         margin-right: 20px;
         margin-bottom: 20px;
        
        >a{
          display: block;
            >p{
             font-weight: 500;
             height: 22px;
             line-height: 22px;
             text-overflow: ellipsis;
             overflow: hidden;
             white-space:nowrap;
             color: #000;
             padding: 10px 0 10px 0;
            }
            >img{
              width: 220px;
              height: 220px;
            }
            >span{
              margin-top: 5px;
              font-size: 20px;
              line-height: 24px;
              height: 24px;
              color: #ff5000;
            }
         
        }
       }    
      }
     }
     .guoji{
       width: 100%;
       margin: 18px 4px 0 10px;
      //  background-color: #8b0505;
      //  height: 800px;
       >.guoji_m{
           width: 100%;
           margin-top: 20px;
        >.guoji_m_left{
           width: 18%;
           float: left;
          //  margin-right: 20px;
           >.guoji_left_top{
             border-radius: 10px;
             overflow: hidden;
             margin-bottom: 15px;
             position: relative;
             >.fix{
               width: 190px;
               height: 72px;
               background-color: rgba(4, 4, 4, 0.5);
               position: absolute;
               top: 200px;
               left: 0;
               >div{
                 float: left;
               }
               >div:nth-child(1){
                margin: 14px 0 0 12px;
                width: 36px;
                height: 50px;
                color: #fff;
                font-size: 18px;
                line-height: 25px;
                overflow: hidden;
               }
               >div:nth-child(2){
                margin: 16px 20px 0;
                height: 41px;
                width: 1px;
                background-color: rgba(5, 4, 4, 0.4);
               }
               >div:nth-child(3){
                 color: white;
                margin: 14px 0 0 12px;

               }

             }
           }
          
        } 
        >.guoji_m_right{
          float: left;
          width: 82%;
          >div{
            width: 23%;
            float: left;
            margin-left: 15px;
            margin-bottom: 25px;
         
           
           >a{
             display: block;
             img{
              border-radius: 12px;
              overflow: hidden;
              display: block;
              background-color: rgba(0,0,0,.2);

             }
               >p{
                font-weight: 500;
                height: 22px;
                line-height: 22px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space:nowrap;
                color: #000;
                padding: 10px 0 10px 0;
               }
               >span{
                 margin-top: 5px;
                 font-size: 20px;
                 line-height: 24px;
                 height: 24px;
                 color: #ff5000;
               }
            
           }
          }  

        }
        
       }
       
     }
     .xihuan{
       width: 100%;
       margin: 44px 18px 16px 18px;
      //  background-color: #F83C3D;
      border-radius: 0 0 40px 40px ;
      overflow: hidden;
       >.xi_top{
         em{
           color: black;
           float: left;
           font-size: 24px;
           line-height: 24px;
           font-weight: 700;
          //  margin-right: 10px;
         }
         span{
          float: left;
          width: 68px;
          height: 20px;
          line-height: 20px;
          color: #fff;
          font-size: 14px;
          background-color: #F83C3D;
          border-radius: 20px;
          margin-top: 5px;
          text-align: center;
         }
       }
       >.xi_bottom{
         width: 100%;
         margin-top: 18px;
        >div{
          width: 18%;
          float: left;
          margin-left: 15px;
          margin-bottom: 25px;
         >a{
           &:hover p{
             text-decoration: underline blue;

           }
           display: block;
           img{
            border-radius: 12px;
            overflow: hidden;
            display: block;
            background-color: rgba(0,0,0,.05);
           }
             >p{
              font-weight: 500;
              height: 40px;
              line-height: 22px;
              // text-overflow: ellipsis;
              // overflow: hidden;
              // white-space:nowrap;
              color: #000;
             }
             >span{
              //  padding-top: 45px;
               font-size: 20px;
               line-height: 24px;
               height: 24px;
               color: #ff5000;
             }
          
         }
        }  
       }
      
     }

     

    



  }
 
 
}

.kong{
  width:100%;
  height: 3018px;
  position: absolute;
     

  background-color: #F6F0F0;

      top: 0px;
      left: 0;
      z-index: -1;
}
.foot{
  width: 100%;
  height: 375px;
  border-top: 1px solid black;

  >.foot_top{
    background-image: url(../images/foot_back.jpg);
    background-repeat: no-repeat;
  width: 1190px;
  height: 100px;
  margin: 25px auto;
  padding: 0;
  // border-top: 1px solid #999;
  >a{
    float: left;
    display: block;
    width: 297px;
    height: 100px;
    text-indent: -1000em;
  }
  }
  >.foot_bottom{
    width: 1190px;
    height: 200px;
    // background-color: #F83C3D;
    border-top: 1px solid #ccc;
    margin: 0 auto;
    background-image: url(../images/maomi.jpg);
    background-repeat: no-repeat;
    background-position: 45px bottom;
    padding-top: 22px;
    >dl{
      float: left;
      width: 186px;
      padding-left: 52px;
      >dt:nth-child(1){
        color: #646464;
    font-size: 16px;
    font-weight: 700;
    height: 30px;
    line-height: 30px;
    text-align: left;
      }
      >dt{
        a{
          font-style: 12px;
          display: block;
          width: 100px;
          overflow: hidden;
          text-align: left;
          height: 20px;
          line-height: 20px;
          color: #8b8b8b;
          &:hover{
            text-decoration: underline #ccc;
          }
        }
        img{
          width: 105px;
          height: 105px;
        }
      }
    }
  }
  
}

